import { Tooltip } from 'antd'
import { colors, flexCenter } from '@/desktop/styles'

export function SiderItem(props: {
  collapsed: boolean
  icon: React.ReactNode
  title: React.ReactNode
  tooltip?: React.ReactNode
  openTooltip?: React.ReactNode // 展开状态时要显示的 tooltip
  className?: string
  onClick?: () => void
  hover?: boolean // 是否启用 hover 样式
}) {
  const { collapsed, icon, title, tooltip, openTooltip, className, onClick, hover = true } = props
  return <Tooltip title={collapsed ? tooltip ?? title : openTooltip ?? null} placement="right">
    <div
      css={[styles.siderItem, hover ? styles.hover : '']}
      className={className}
      onClick={onClick}
    >
      <span className="icon-wrap">
        <span className="icon-content">{icon}</span>
      </span>
      <span className="title">{title}</span>
    </div>
  </Tooltip>
}

export const siderSizes = {
  column: 72, // 整个侧边栏在收起时的宽度
  iconContent: 42,
  icon: 24,
  itemPadding: 1,
}
export const siderColors = {
  text: 'rgba(0, 0, 0, 0.65)',
}

const styles = {
  siderItem: css`
    align-items: center;
    color: #000;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: ${siderSizes.iconContent + siderSizes.itemPadding * 2}px;
    user-select: none;

    & > .icon-wrap {
      flex-shrink: 0;
      height: ${siderSizes.iconContent}px;
      width: ${siderSizes.column}px;
      .icon-content {
        ${flexCenter};
        border-radius: 6px;
        height: ${siderSizes.iconContent}px;
        margin: 0 auto;
        width: ${siderSizes.iconContent}px;
      }
      svg {
        height: ${siderSizes.icon}px;
        width: ${siderSizes.icon}px;
      }
    }

    & > .title {
      color: ${siderColors.text};
      flex: 1;
      margin-left: -5px;
      overflow: hidden;
      transition: margin-left 0.2s;
      white-space: nowrap;
    }
    .ant-layout-sider-collapsed & > .title {
      margin-left: 0;
    }
  `,
  hover: css`
    &:hover {
      &,
      & > .title {
        color: ${colors.link};
      }
    }
    &:active {
      &,
      & > .title {
        opacity: 0.9;
      }
    }
  `,
}
